import React from 'react';
import { Collapse, List, Tag, Space, Typography } from 'antd';
import { FileOutlined } from '@ant-design/icons';
import { ExperimentResult } from '../../types';
import { formatFileSize } from '../../utils/formatUtils';

const { Text, Title } = Typography;

interface ResultFilesListProps {
  results: ExperimentResult[];
  activeKey?: string;
  onChange?: (key: string | string[]) => void;
}

const ResultFilesList: React.FC<ResultFilesListProps> = ({ 
  results, 
  activeKey, 
  onChange 
}) => {
  if (!results || results.length === 0) {
    return null;
  }

  const collapseItems = [
    {
      key: 'result-files',
      label: (
        <Title level={4} style={{ margin: 0, fontWeight: 600, fontSize: '16px', color: '#262626' }}>
          <FileOutlined style={{ marginRight: 8 }} />
          结果文件
        </Title>
      ),
      children: (
        <List
          dataSource={results}
          renderItem={(result) => (
            <List.Item>
              <List.Item.Meta
                title={
                  <Space>
                    <Text strong>{result.name}</Text>
                    <Tag color="blue">{result.file_type}</Tag>
                    {result.file_size && (
                      <Text type="secondary" style={{ fontSize: '12px' }}>
                        {formatFileSize(result.file_size)}
                      </Text>
                    )}
                  </Space>
                }
                description={
                  <div>
                    <div style={{ marginTop: 4 }}>
                      <Text code style={{ fontSize: '12px' }}>{result.file_path}</Text>
                    </div>
                    {result.description && (
                      <div style={{ marginTop: 4, fontSize: '12px', color: '#999' }}>
                        {result.description}
                      </div>
                    )}
                  </div>
                }
              />
            </List.Item>
          )}
        />
      ),
    },
  ];

  return (
    <div id="result-files" style={{ marginBottom: 16 }}>
      <Collapse
        items={collapseItems}
        activeKey={activeKey}
        onChange={onChange}
        style={{
          background: '#fff',
          border: '1px solid #e8e8e8'
        }}
      />
    </div>
  );
};

export default ResultFilesList;

